/*
 * @Author: xiaosihan 
 * @Date: 2021-07-25 13:51:58 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 16:42:18
 */

import { ExtrudeMesh, ExtrudePath, ExtrudeShapePath, Group3D, } from "xsh-react-three";
import muntainJPEG from "./muntain.jpeg";


interface Props { }

interface State {
    pathType: 1 | 2
}

export default class Muntain extends Group3D<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    state: State = {
        pathType: 1
    }

    // 挤出形状
    shapePath1: ExtrudeShapePath[] = [
        [-2, 0],
        [2, 0],
    ];

    shapePath2: ExtrudeShapePath[] = [
        [-2, 0],
        [2, 0],
    ];

    // 挤出路径1
    paths1: ExtrudePath[] = [
        {
            vector3: [0, 0, 0],
            name: "起点",
            radius: 0.1,
            segments: 0,
            scale: { x: 1, y: 1 },
        },
        {
            vector3: [0, 0, 10],
            name: "第二个节点",
            radius: 0.1,
            segments: 0,
            scale: { x: 1, y: 1 },
        },
    ]

    // 挤出路径2
    paths2: ExtrudePath[] = [
        {
            vector3: [0, 0, 0],
            name: "起点",
            radius: 0.1,
            segments: 0,
            scale: { x: 1, y: 1 },
        },
        {
            vector3: [0, 0, 10],
            name: "第一个节点",
            radius: 1,
            segments: 1,
            scale: { x: 2, y: 2 },
        }
    ]

    switchPath = () => {
        const { pathType } = this.state;
        this.setState({
            pathType: pathType === 1 ? 2 : 1
        })
    }


    render() {

        const { pathType } = this.state;

        return (
            <>
                <ExtrudeMesh
                    duration={500}
                    castShadow={true}
                    receiveShadow={true}
                    name="mountain"
                    position={{ x: -5 }}
                    color="#fff"
                    // map={muntainJPEG}
                    closed={false}
                    wireframe={false}
                    cursor="pointer"
                    onClick={this.switchPath}
                    shapePath={pathType === 1 ? this.shapePath1 : this.shapePath2}
                    paths={pathType === 1 ? this.paths1 : this.paths2}
                    material="MeshPhongMaterial"
                />
                <ExtrudeMesh
                    duration={500}
                    castShadow={true}
                    receiveShadow={true}
                    name="mountain"
                    position={{ x: -5, y: 4 }}
                    color="#fff"
                    // map={muntainJPEG}
                    closed={false}
                    wireframe={false}
                    cursor="pointer"
                    onClick={this.switchPath}
                    shapePath={pathType === 1 ? this.shapePath1 : this.shapePath2}
                    paths={pathType === 1 ? this.paths1 : this.paths2}
                    material="MeshPhongMaterial"
                />
            </>
        );
    }
}